<template>
  <el-dialog
    title="新增资产"
    :visible.sync="dialogVisible"
    width="700px"
    class="popup height50"
    :before-close="handleClose">
    <div class="scrollbar-wrap">
      <el-scrollbar class="scrollbar-x" style="height:100%">
        <el-form 
          :inline="true" 
          :model="formInline" 
          :rules="rules" 
          ref="formInline" 
          label-width="110px" 
          size="small">
          <el-form-item label="资产名称:">
            <el-input v-model.number="formInline.username" clearable></el-input>
          </el-form-item>
          <el-form-item label="资产类目:" >
            <el-input v-model="formInline.realname" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="资产状态:">
            <el-input type="password" v-model="formInline.password" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="资产来源:">
            <el-input type="password" v-model="formInline.checkPass" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="单位:" prop="age">
            <el-input v-model.number="formInline.phone" clearable></el-input>
          </el-form-item>
          <el-form-item label="资产SN号:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="资产Mac地址:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="密级:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="用途:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="品牌:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="规格:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="型号:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="放置位置:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="IP地址:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="硬盘ID:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="硬盘MAC地址:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="端口号:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="购入日期:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="购入人:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="保修时间:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="使用寿命:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="登记人:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="使用位置:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="保管人:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="使用人:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="安装日期:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="工程商:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="维保商:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="维保人:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="维保人手机号:" prop="age">
            <el-input v-model.number="formInline.age" clearable></el-input>
          </el-form-item>

          <el-form-item label="备注:" prop="age">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="formInline.age">
            </el-input>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" size="small"  @click="handleAdd">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import TreeSelect from '@/components/TreeSelect'
import { addPersonnel } from '@/api/personnel'
export default {
  components: {
    TreeSelect
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
      formInline: {
        username: '',
        password: '',
        phone: '',
        role: ['1'],
        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
      },
      defaultProps: {
        parent: 'parentId',   // 父级唯一标识
        value: 'id',          // 唯一标识
        label: 'label',       // 标签显示
        children: 'children', // 子级
      },
      isShowSelect: false,//选择面板，默认隐藏
      officeTreeList: this.$config.treeList,//树形结构数据
      selectedOfficeIds: '',//选择后返回的选中id，以逗号拼接
      selectedOffices: [],//选择后返回的选中对象，
      clearTreeSelect: 0,
      nodeKey: "id",//树形结构数据中对应的属性名称，可改为自己数据中属性
      defaultCheckedKeys: [],//默认初次选中的数据
    };
  },
  computed: {
    rules() {
      return {
        // pass: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        // ],
        // checkPass: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        // ],
        // age: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        // ]
      }
    }
      
  },
  methods: {
    togglePopup(flag) {
      this.dialogVisible = flag
    },
    handleClose(done) {
     this.togglePopup(false)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAdd() {
      addPersonnel(this.formInline)
        .then(res => {
          if (res.code === 0) {
            this.$message.success(res.msg || '成功')
            this.togglePopup(false)
            this.$emit('refresh')
          }
        })
        .catch(err => {
          this.togglePopup(false)
        })
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~styles/popup.scss'
</style>